<template>
  <div class="menudetail" v-cloak>
    <div class="menumain">
      <MainMenu :menuinfo="this.menuinfo" :scflag="this.store"></MainMenu>
      <Right
        :createdtime="this.menuinfo.pushtime"
        :menutitle="this.menuinfo.title"
        :menuid="this.$route.params.cookid"
        :describe.sync="describe"
      ></Right>
    </div>
    <div ref="otherbox" class="otherbox">
      <template v-if="showOther">
        <Othermenu
          :userid="this.menuinfo.userid"
          :showOther="this.showOther"
          :thiscookid="this.$route.params.cookid"
        ></Othermenu>
      </template>
    </div>
    <div ref="reviewbox" class="reviewbox">
      <template v-if="showReview">
        <Review
          :cookid="this.$route.params.cookid"
          :menuTitle="this.menuinfo.title"
        ></Review>
      </template>
    </div>
  </div>
</template>

<script>
import MainMenu from "@/views/menudetail/components/mainmenu/MainMenu.vue";
import Review from "./components/Review";
import Othermenu from "./components/Othermenu.vue";
import Right from "@/views/menudetail/components/right/Right.vue";
export default {
  data() {
    return {
      id: "",
      menuinfo: { yongliao: "", buzhou: "", buzouimg: "", pushtime: "" },
      showReview: false,
      showOther: false,
      scrollTop: "",
      describe: "",
      store:""
    };
  },
  components: {
    MainMenu,
    Right,
    Review,
    Othermenu,
  },
  methods: {
    workerLoader() {
      if (this.$refs.reviewbox) {
        if (window.scrollY > this.$refs.reviewbox.offsetTop - 720) {
          this.showReview = true;
        }
      }
      if (this.$refs.otherbox) {
        if (window.scrollY > this.$refs.otherbox.offsetTop - 720) {
          this.showOther = true;
        }
      }
    },
    fscroll1() {
      if (this.$refs.otherbox) {
        //描述的固定定位
        let otherOffsettop =
          this.$refs.otherbox && this.$refs.otherbox.offsetTop;
        if (
          window.scrollY > this.destop + 125 &&
          window.scrollY < otherOffsettop - 300
        ) {
          this.describe.style.position = "fixed";
          this.describe.style.top = 0;
        } else {
          this.describe.style.position = "";
        }
      }
    },
    // 用户是否收藏该商品
    fifstore() {
      this.$axios("/wxw/wifstore", {
        params: { cookid: this.menuinfo.id },
      }).then((res) => {
        if (res.data.code==3100) {
          //已收藏
          this.store=0
        }else{
          this.store=1
        }
      });
    },
  },
  watch: {
    // 监听cookid获取信息
    $route: {
      deep: true,
      handler() {
        // 根据菜谱id获取菜谱信息
        this.$axios("/wxw/menuinfo", {
          params: {
            id: this.$route.params.cookid,
          },
        }).then((res) => {
          this.menuinfo = res.data[0];
          this.fifstore();
        });
      },
    },
  },
  mounted() {
    // 根据菜谱id获取菜谱信息
    this.$axios("/wxw/menuinfo", {
      params: {
        id: this.$route.params.cookid,
      },
    }).then((res) => {
      this.menuinfo = res.data[0];
      this.fifstore();
    });
    // 懒加载
    window.onscroll = () => {
      this.workerLoader();
      this.fscroll1();
    };
    if (this.describe) {
      // 描述的offsettop
      this.destop = this.describe.offsetTop;
    }
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
li {
  list-style: none;
}
input {
  outline: none;
}
.menumain {
  display: flex;
  justify-content: space-between;
  width: 1000px;
  margin: 0 auto;
}
</style>